<template>
  <div>
    <div class="logo">
      <img :src="logo" />
    </div>
    <div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="mobile"
          name="mobile"
          label="手机号"
          placeholder="手机号"
          :rules="[{ pattern:m_pattern, message: '请填写正确的手机号' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ pattern: p_pattern, message: '密码长度只少6个' }]"
        />
        <div style="margin: 16px;">
          <van-button square block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import logo from "@/assets/logo.png";
import Vue from "vue";
import { Form, Field, Button, Toast } from "vant";
Vue.use(Form);
Vue.use(Field);
Vue.use(Button);
Vue.use(Toast);
export default {
  data() {
    return {
      mobile: "",
      password: "",
      m_pattern: /^1[3-9]\d{9}$/,
      p_pattern: /[\s\S]{6,}/,
      logo,
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      this.$http
        .post("http://127.0.0.1:3721/backend/login", values)
        .then((ret) => {
          if (ret.error_code === 0) {
            Toast.success("登录成功");
            this.$router.push("/center");
          } else {
            Toast.fail(ret.message);
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.logo {
  margin-top: 150px;
  margin-bottom: 100px;
  text-align: center;
}
</style>
